<template>
  <el-card>
    <template #header>
      <div class="flex-x-between">
        <div class="flex-y-center">通知公告</div>
        <el-link type="primary">
          <span class="text-xs" @click="navigateToNoticePage">查看更多</span>
          <el-icon class="text-xs">
            <ArrowRight />
          </el-icon>
        </el-link>
      </div>
    </template>

    <el-scrollbar height="390px">
      <div v-for="(item, index) in notices" :key="index" class="flex-y-center py-4 pr-4">
        <DictLabel v-model="item.type" code="notice_type" size="small" />
        <el-text truncated class="!mx-2 flex-1 !text-xs !text-gray">
          {{ item.title }}
        </el-text>
        <el-text class="!text-xs !text-gray mr-4" style="padding-right: 5px;">
          {{ item.publishTime }}
        </el-text>
        <el-link @click="openNoticeDetail(item.id)">
          <el-icon class="text-sm">
            <View />
          </el-icon>
        </el-link>
      </div>
    </el-scrollbar>
  </el-card>
  <NoticeDetail ref="noticeDetailRef" />
</template>

<script setup>
import { useRouter } from 'vue-router'
import NoticeAPI from "@/api/system/notice";

const noticeDetailRef = ref();
const router = useRouter();
// 当前通知公告列表
const notices = ref([]);
/**
 * 获取当前用户的通知公告数据
 */
const fetchMyNotices = () => {
  NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 10 }).then((data) => {
    notices.value = data.list;
  });
};

/**
 * 打开指定通知详情
 *
 * @param id - 通知 ID
 */
function openNoticeDetail(id) {
  noticeDetailRef.value.openNotice(id);
}
/**
 * 跳转至通知公告详情页面（查看更多通知）
 */
function navigateToNoticePage() {
  router.push({ path: "/myNotice" });
}

onMounted(() => {
  fetchMyNotices();
});
</script>

<style lang="scss" scoped></style>